import React from 'react';
import { LeftOutline } from 'antd-mobile-icons';
import style from '../Lyf/Quan.module.css';
import {useNavigate} from 'react-router-dom'

export default function Quan() {
    const navigate=useNavigate()
    // 优惠券数据
    const availableCoupons = [
        { id: 1, amount: 5, type: "购物红包", condition: "无使用门槛", expire: "2017.03.10-2017.12.30", status: "available" },
        { id: 2, amount: 2, type: "购物红包", condition: "满30元可用", expire: "2017.03.10-2017.12.30", status: "available" }
    ];

    const unavailableCoupons = [
        { id: 3, amount: 3, type: "购物红包", condition: "满40元可用", expire: "2017.03.10-2017.12.30", status: "unavailable", reason: "商品合计金额满40元使用" }
    ];

    return (
        <div className={style.container}>
            {/* 顶部导航栏 */}
            <div className={style.header}>
                <LeftOutline className={style.backIcon} onClick={()=>navigate('/my')} />
                <h1 className={style.title}>优惠券</h1>
            </div>
            
            {/* 优惠码兑换区 */}
            <div className={style.codeSection}>
                <input 
                    type="text" 
                    placeholder="请输入优惠码" 
                    className={style.codeInput}
                />
                <button className={style.redeemButton}>兑换</button>
            </div>
            
            {/* 可使用优惠券 */}
            <div className={style.couponSection}>
                <h3 className={style.sectionTitle}>可使用优惠券(3)</h3>
                {availableCoupons.map(coupon => (
                    <div key={coupon.id} className={`${style.couponCard} ${style.available}`}>
                        <div className={style.couponLeft}>
                            <div className={style.amount}>￥{coupon.amount}</div>
                            <div className={style.type}>{coupon.type}</div>
                        </div>
                        <div className={style.couponRight}>
                            <div className={style.detail}>
                                <div className={style.condition}>{coupon.condition}</div>
                                <div className={style.expire}>有效期：{coupon.expire}</div>
                            </div>
                            <button className={style.useButton}>立即使用</button>
                        </div>
                    </div>
                ))}
            </div>
            
            {/* 不可使用优惠券 */}
            <div className={style.couponSection}>
                <h3 className={style.sectionTitle}>不可使用优惠券(2)</h3>
                {unavailableCoupons.map(coupon => (
                    <div key={coupon.id} className={`${style.couponCard} ${style.unavailable}`}>
                        <div className={style.couponLeft}>
                            <div className={style.amount}>￥{coupon.amount}</div>
                            <div className={style.type}>{coupon.type}</div>
                        </div>
                        <div className={style.couponRight}>
                            <div className={style.detail}>
                                <div className={style.condition}>{coupon.condition}</div>
                                <div className={style.expire}>有效期：{coupon.expire}</div>
                                {coupon.reason && (
                                    <div className={style.reason}>优惠券不可用原因 {coupon.reason}</div>
                                )}
                            </div>
                            <button className={style.disabledButton}>立即使用</button>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}